<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html5新增控件</title>
</head>
<body>
    <h1>HTML5新增控件</h1>
    <form action="#" method="post">
    <p>颜色：<input type="color" /></p>
    <p>日期:<input type="date"/></p>
    <p>时间：
        <input type="time"/>
    </p>
    <p>
        电子邮件：
        <input type="email" />
    </p>
    <p>
        必填项：
        <input type="text" required/>
    </p>
    <p>
        数字：
        <input type="number" min="0" max="100" step="5"/>
    </p>
    <p>
        拖拽条：
        <input type="range" max="50" min="20"/>
    </p>
    <p>
        搜索框：
        <input type="search"/>
    </p>
    <p>
        URL：
        <input type="url"/>
    </p>
    <p>
        datalist：
        <input type="text" list="browsers" />
        <datalist id="browsers">
            <option value="Chrome">Chrome</option>
            <option value="Firefox">Firefox</option>
            <option value="Safari">Safari</option>
            <option value="Edge">Edge</option>
            <option value="Opera">Opera</option>
        </datalist>
    </p>

    <input type="submit" value="提交"/>
    </form>
</body>
</html>